import React, { PureComponent } from 'react';
import { Grid, List, Flex, Icon } from 'antd-mobile';
import Img from '../../components/Img/Img';
import { floor_list, div_Lz, imgCenter } from './HomeFloorGoods.less';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import more from '../../assets/svg/more.svg';

const IconClass = ({ url }) => {
  return (<div style={{
    width: '0.50rem',
    height: '0.50rem',
    background: `url(${url}) center center /  0.44rem 0.44rem no-repeat`,
    display: 'inline-block',
    marginRight: '0.1rem',
  }}
  />);
};
 class HomeFloorGoods extends PureComponent {
     onClick = (dataItem, index) => {
         if (dataItem.actionType == "xianshiqiang") {
             // 限时抢购
             return  this.props.dispatch(routerRedux.push({
                 pathname: `/goodsDetail/${dataItem.actionTypeParams}`,
             }));
         } else if (dataItem.actionType == "searchByKeyWord") {
             // 按关键字检索
             return this.props.dispatch( routerRedux.push({pathname: `/goodsearch/keywordSearch?searchType=${dataItem.actionType}&keyword=${dataItem.actionTypeParams}`}) )
         } else if (dataItem.actionType == "searchGoodsByClass") {
             // 分类查询结果列表界面
             return this.props.dispatch(routerRedux.push(`/goodsearch/gcIdSearch?keyword=${dataItem.actionTypeParams}&showKeyword=${encodeURIComponent(dataItem.title)}`));
         } else if (dataItem.actionType == "goodsDetail") {
             // 商品详情
             this.props.dispatch(routerRedux.push({pathname: `/goodsDetail/${dataItem.actionTypeParams}`}))
         } else if (dataItem.actionType == "seckill") {
             return  this.props.dispatch(routerRedux.push({
                 pathname: `/goodsDetail/${dataItem.actionTypeParams}`,
             }));
         } else if (dataItem.actionType == "goodsDetail") {
             // 团购。。。。。。  后台写错了。。。。。。
         } else if (dataItem.actionType == "bargainDetail") {
             // 砍价详情：bargainDetail
         } else if (dataItem.actionType == "raiseDetail") {
             // 众筹详情
         } else if (dataItem.actionType == "groupDetail") {
             // 拼团详情
         } else if (dataItem.actionType == "link") {
             // 连接
             window.location.href = dataItem.actionTypeParams;
         }

     }
  renderHeader = (data) => {

    return (
        <div>
            <Flex justify="center" style={{height:"1rem"}}>
                <Img style={{ width:"1rem",marginRight:'.3rem'}} src={ data.icon } />
                <div className="floor_name" style={{margin: '.3rem 0rem'}}>{data.name}</div>
                <Img style={{width:"1rem",marginLeft:'.3rem' }} src={ data.icon } />
            </Flex>

            {
                data.bannerImg && <Img style={{ width:'100%', verticalAlign:'middle' ,height:"2.5rem"}} src={ data.bannerImg } />
            }

        </div>
    );
  }
     lookMore = ()=>{
         const { data } = this.props;
         if (data.actionType == "xianshiqiang") {
             // 限时抢购
             return this.props.dispatch(routerRedux.push({pathname: `/timeBuy/${1}`}));
         } else if (data.actionType == "searchByKeyWord") {
             // 按关键字检索
             return this.props.dispatch(routerRedux.push(`/goodsearch/keywordSearch?keyword=${encodeURIComponent(data.actionTypeParams)}&showKeyword=${encodeURIComponent(data.actionTypeParams)}`));
         } else if (data.actionType == "searchGoodsByClass") {
             // 分类查询结果列表界面
            return this.props.dispatch(routerRedux.push(`/goodsearch/gcIdSearch?keyword=${data.actionTypeParams}&showKeyword=${encodeURIComponent(data.name)}`));
         } else if (data.actionType == "goodsDetail") {
             // 商品详情
             this.props.dispatch(routerRedux.push({pathname: `/goodsDetail/${data.actionTypeParams}`}))
         } else if (data.actionType == "seckill") {
             return this.props.dispatch(routerRedux.push({pathname: `/secKill/${1}`}));
         } else if (data.actionType == "goodsDetail") {
             // 团购。。。。。。  后台写错了。。。。。。
         } else if (data.actionType == "bargainDetail") {
             // 砍价详情：bargainDetail
         } else if (data.actionType == "raiseDetail") {
             // 众筹详情
         } else if (data.actionType == "groupDetail") {
             // 拼团详情
         } else if (data.actionType == "link") {
             // 连接
             window.location.href = data.actionTypeParams;
         }

     }
  render() {
    const { data } = this.props;
    let firstBlock = null;
    let sencondBlock = null;
    console.log(data,!data.floorItemList)
    if (!(data.floorItemList || [])[0]) return false;

    if (data.showType == '4') {
      firstBlock = (<Grid
        className="four"
        data={data.floorItemList}
        columnNum={4}
        onClick={this.onClick }
        renderItem={(dataItem, index) => (
          <Flex direction="column">
            <div style={{ height:'2rem',width:"100%",textAlign:"center", boxSizing:"border-box" }}>
              <Img style={{ width:'1.5rem', height: '1.5rem',marginTop:".3rem" }} src={dataItem.imgUrl} />
            </div>
            <div style={{ boxSizing:"border-box", padding: '0rem 0.2rem', height:'1.4rem', lineHeight:'0.4rem', width: '100%' }}>
                <div className="text-overflow-hidden" style={{ color:'' }}>{dataItem.goodsName}</div>
                <div className="text-overflow-hidden" style={{ color:'#FA446C' }}>￥{dataItem.activityPrice}</div>
                <div style={{ color:'#CACACA', textDecoration:'line-through', textAlign: 'center' }}>￥{dataItem.subtitle}</div>
            </div>
          </Flex>
          )}
      />);

      // sencondBlock = (<Grid
      //   className="eight"
      //   data={data.goodsList.slice(2, 10)}
      //   columnNum={4}
      //   renderItem={(dataItem, index) => (
      //     <Flex direction="column">
      //       <Flex.Item style={{ padding: '0rem 0.2rem', height: '1.2rem', border: 'none' }}>
      //         <Img style={{ maxHeight: '1.2rem' }} src={dataItem.goodsImage} />
      //       </Flex.Item>
      //       <Flex.Item style={{ padding: '0rem 0.2rem', width: '100%' }}>
      //         <div style={{ fontSize: '0.24rem', height: '0.4rem', lineHeight: '0.4rem' }} className="text-overflow-hidden">{dataItem.goodsName}</div>
      //       </Flex.Item>
      //       <Flex.Item>
      //         <div style={{ color: 'red' }} >{`¥${dataItem.goodsPrice}`}</div>
      //       </Flex.Item>
      //     </Flex>
      //     )}
      // />);
    } else if (data.showType == '2*4' && data.actionType=="tuangou") {
      firstBlock = (
          <Grid
           // className="tow_four"
            data={data.floorItemList.slice(0,2)}
            columnNum={2}
            onClick={this.onClick }
            renderItem={(dataItem, index) => (
                <div style={{width:"100%",height:"100%"}}>
                    <div style={{ width: '100%',height:"75%", overflow: 'hidden',textAlign:"center" }}>
                        <Img style={{ width:'2rem',height:"2rem",marginTop:".5rem" }} src={dataItem.imgUrl} />
                    </div>

                    <div style={{  marginTop:".1rem", textAlign: 'center' }}>
                        <div className="text-overflow-hidden Lz2" style={{marginBottom:".1rem"}}>{dataItem.title}</div>
                        <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                    </div>
                </div>

              )}
          />
      );
      sencondBlock = (
          <Grid
            className="tow_four"
            data={data.floorItemList.slice(2, 6)}
            columnNum={4}
            onClick={this.onClick }
            renderItem={(dataItem, index) => (
                <Flex direction="column" style={{height:"100%"}}>
                    {/* {console.warn(data.floorItemList.slice(2,4), data.floorItemList, "2*4  团购数据。。。。。。。")} */}
                    <div  style={{ boxSizing:"border-box", width:'100%', height: '2rem',textAlign:"center" }}>
                        <Img style={{ width:'1.5rem', height: '1.5rem',marginTop:".3rem" }} src={dataItem.imgUrl} />
                    </div>
                    <div style={{ boxSizing:"border-box", padding: '0rem 0.2rem', width: '100%',lineHeight: '0.3rem',marginTop:".1rem" }}>
                        <div  className="text-overflow-hidden">{dataItem.title}</div>
                        <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                    </div>
                </Flex>
            )}
          />
      );
    }else if (data.showType == '2*4*4') {
        firstBlock = (
            <Grid
                // className="tow_four"
                data={data.floorItemList.slice(0,2)}
                columnNum={2}
                onClick={this.onClick }
                renderItem={(dataItem, index) => (
                    <Flex style={{ position:"relative" }} direction="column" onClick={() => {}}>
                        {/* <div style={{ boxSizing:"border-box", width: '100%', height:'100%' }}>
                            <Img style={{ width:'100%', maxHeight:"100%" }} src={dataItem.imgUrl} />
                        </div>
                        <div style={{ boxSizing:"border-box", position:"absolute", top:'0rem', left:'0rem', padding: '0rem 0.2rem', width: '100%', height: '0.8rem', lineHeight: '0.4rem' }}>
                            <div  className="text-overflow-hidden Lz4">{dataItem.title}</div>
                            <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                        </div> */}
                        <div className={ div_Lz }>
                            {/* 二 */}
                            <div style={{ width: '3rem', height: '3rem', margin: '0 auto', overflow: 'hidden', display: 'block' }}>
                                <Img style={{ width:'100%' }} src={dataItem.imgUrl} />
                            </div>

                            <div style={{ display: 'block', margin: '0 auto', paddingTop: '.1rem', textAlign: 'center' }}>
                                <div className="text-overflow-hidden Lz2">{dataItem.title}</div>
                                <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                            </div>
                        </div>
                    </Flex>
                )}
            />
        );
        sencondBlock = (
            <Grid
                className="tow_four_four"
                data={data.floorItemList.slice(2, 8)}
                columnNum={4}
                onClick={this.onClick }
                renderItem={(dataItem, index) => (
                    <Flex direction="column" style={{height:"100%"}}>
                        {/* {console.warn(data.floorItemList.slice(2,4), data.floorItemList, "2*4  团购数据。。。。。。。")} */}
                        <div  style={{ boxSizing:"border-box", width:'100%', height: '2rem',textAlign:"center" }}>
                            <Img style={{ width:'1.5rem', height: '1.5rem',marginTop:".3rem" }} src={dataItem.imgUrl} />
                        </div>
                        <div style={{ boxSizing:"border-box", padding: '0rem 0.2rem', width: '100%',lineHeight: '0.3rem',marginTop:".1rem" }}>
                            <div  className="text-overflow-hidden">{dataItem.title}</div>
                            <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                        </div>
                    </Flex>
                )}
            />
        );
    }else if (data.showType == '2*2*4') {
        firstBlock = (
            <Grid
                // className="tow_four"
                data={data.floorItemList.slice(0,4)}
                columnNum={2}
                onClick={this.onClick }
                renderItem={(dataItem, index) => (
                    <Flex style={{ position:"relative" }} direction="column" onClick={() => {}}>
                        {/* <div style={{ boxSizing:"border-box", width: '100%', height:'100%' }}>
                            <Img style={{ width:'100%', maxHeight:"100%" }} src={dataItem.imgUrl} />
                        </div>
                        <div style={{ boxSizing:"border-box", position:"absolute", top:'0rem', left:'0rem', padding: '0rem 0.2rem', width: '100%', height: '0.8rem', lineHeight: '0.4rem' }}>
                            <div className="text-overflow-hidden Lz">{dataItem.title}</div>
                            <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                        </div> */}

                        <div className={ div_Lz }>
                            {/* 二 */}
                            <div className={ imgCenter } style={{ width: '3rem', height: '3rem', margin: '0 auto', overflow: 'hidden', display: 'block' }}>
                                <Img style={{ width:'100%' }} src={dataItem.imgUrl} />
                            </div>

                            <div style={{ display: 'block', margin: '0 auto', paddingTop: '.1rem', textAlign: 'center' }}>
                                <div className="text-overflow-hidden Lz2">{dataItem.title}</div>
                                <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                            </div>
                        </div>
                    </Flex>
                )}
            />
        );
        sencondBlock = (
            <Grid
                className="tow_four_four"
                data={data.floorItemList.slice(4, 8)}
                columnNum={4}
                onClick={this.onClick }
                renderItem={(dataItem, index) => (
                    <Flex direction="column">
                        <div className={ imgCenter } style={{ boxSizing:"border-box", width:'100%', height: '2rem' }}>
                            <Img style={{ width:'100%', maxHeight: '2rem' }} src={dataItem.imgUrl} />
                        </div>
                        <div style={{ boxSizing:"border-box", padding: '0rem 0.2rem', height:'0.8rem', lineHeight:'0.4rem',  width: '100%' }}>
                            <div className="text-overflow-hidden">{dataItem.title}</div>
                            <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                        </div>
                    </Flex>
                )}
            />
        );
    }else if (data.showType == '2*4'&&data.actionType!="tuangou") {
        firstBlock = (
            <Grid
                // className="tow_four"
                data={data.floorItemList.slice(0,2)}
                columnNum={2}
                onClick={this.onClick }
                renderItem={(dataItem, index) => (
                    <div style={{width:"100%",height:"100%"}}>
                        <div style={{ width: '100%',height:"75%", overflow: 'hidden',textAlign:"center" }}>
                            <Img style={{ width:'2rem',height:"2rem",marginTop:".5rem" }} src={dataItem.imgUrl} />
                        </div>

                        <div style={{  marginTop:".1rem", textAlign: 'center' }}>
                            <div className="text-overflow-hidden Lz2" style={{marginBottom:".1rem"}}>{dataItem.title}</div>
                            <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                        </div>
                    </div>
                )}
            />
        );
        sencondBlock = (
            <Grid
                className="tow_four_four"
                data={data.floorItemList.slice(2, 6)}
                columnNum={4}
                onClick={this.onClick }
                renderItem={(dataItem, index) => (
                    <Flex direction="column" style={{height:"100%"}}>
                        {/* {console.warn(data.floorItemList.slice(2,4), data.floorItemList, "2*4  团购数据。。。。。。。")} */}
                        <div  style={{ boxSizing:"border-box", width:'100%', height: '2rem',textAlign:"center" }}>
                            <Img style={{ width:'1.5rem', height: '1.5rem',marginTop:".3rem" }} src={dataItem.imgUrl} />
                        </div>
                        <div style={{ boxSizing:"border-box", padding: '0rem 0.2rem', width: '100%',lineHeight: '0.3rem',marginTop:".1rem" }}>
                            <div  className="text-overflow-hidden">{dataItem.title}</div>
                            <div className="text-overflow-hidden">{dataItem.subtitle}</div>
                        </div>
                    </Flex>
                )}
            />
        );
    }






    return (
        <List renderHeader={() => this.renderHeader(data)} className={floor_list}>
              { firstBlock }
              { sencondBlock }
                <Flex style={{ height:"0.8rem", lineHeight:'0.8rem' }} justify="center">
                    <Icon type={ more.id } style={{ color:"#fff" }} />
                    <div style={{ marginLeft:'0.2rem' }} onClick={this.lookMore}>查看更多</div>
                </Flex>
        </List>
    );
  }
}
export default connect (({ home}) => ({ home })) (HomeFloorGoods);
